<template>
  <div class="notification-demo">
    <div class="example-section">
      <h3 class="section-title">消息提示</h3>
      <p class="section-description">各种类型的消息提示组件</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-space wrap>
            <a-button type="primary" @click="showMessage('success')">成功消息</a-button>
            <a-button @click="showMessage('info')">信息消息</a-button>
            <a-button @click="showMessage('warning')">警告消息</a-button>
            <a-button @click="showMessage('error')">错误消息</a-button>
            <a-button @click="showMessage('loading')">加载消息</a-button>
          </a-space>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">通知提醒</h3>
      <p class="section-description">右上角弹出的通知提醒</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-space wrap>
            <a-button type="primary" @click="showNotification('success')">成功通知</a-button>
            <a-button @click="showNotification('info')">信息通知</a-button>
            <a-button @click="showNotification('warning')">警告通知</a-button>
            <a-button @click="showNotification('error')">错误通知</a-button>
            <a-button @click="showCustomNotification">自定义通知</a-button>
          </a-space>
        </div>
      </div>
    </div>

    <!-- 新增：AnyNotification 美观通知组件 -->
    <div class="example-section">
      <h3 class="section-title">🎨 AnyNotification 美观通知组件</h3>
      <p class="section-description">基于Ant Design的notification组件，提供各种类型的美观通知体验（成功、错误、警告、信息等）</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-space wrap size="middle" style="justify-content: center;">
            <a-button type="primary" danger @click="showValidationError">
              🚫 字段验证错误
            </a-button>
            <a-button @click="showParameterError">
              ⚠️ 参数错误
            </a-button>
            <a-button @click="showAuthError">
              🔐 身份验证失败
            </a-button>
            <a-button @click="showPermissionError">
              🚪 访问被拒绝
            </a-button>
          </a-space>

          <a-space wrap size="middle" style="margin-top: 20px; justify-content: center;">
            <a-button @click="showNotFoundError">
              🔍 资源未找到
            </a-button>
            <a-button @click="showServerError">
              💥 服务器错误
            </a-button>
            <a-button @click="showNetworkError">
              🌐 网络连接失败
            </a-button>
          </a-space>

          <a-space wrap size="middle" style="margin-top: 20px; justify-content: center;">
            <a-button type="primary" @click="showSuccessNotification">
              ✅ 成功通知
            </a-button>
            <a-button type="primary" @click="showInfoNotification">
              💡 信息通知
            </a-button>
            <a-button @click="showWarningNotification">
              ⚠️ 警告通知
            </a-button>
          </a-space>
        </div>
      </div>
    </div>

    <!-- AnyNotification特色功能 -->
    <div class="example-section">
      <h3 class="section-title">✨ AnyNotification 特色功能</h3>
      <p class="section-description">相比传统的message提示，AnyNotification通知组件具有更多优势</p>

      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-icon">🎯</div>
          <h4>精准定位</h4>
          <p>右上角固定位置显示，不会遮挡主要内容，用户体验更佳</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon">📝</div>
          <h4>详细描述</h4>
          <p>支持标题和详细描述，可以提供更多的错误信息和解决建议</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon">🎨</div>
          <h4>美观样式</h4>
          <p>支持emoji图标和自定义样式，错误信息更加生动有趣</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon">⏰</div>
          <h4>智能停留</h4>
          <p>根据错误严重程度自动调整显示时长，重要错误停留更久</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon">🔄</div>
          <h4>批量处理</h4>
          <p>多个字段验证错误可以合并显示，避免弹窗轰炸</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon">🎭</div>
          <h4>情感化设计</h4>
          <p>不同类型的错误使用不同的颜色和图标，增强用户感知</p>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">加载状态</h3>
      <p class="section-description">各种加载状态的展示</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-space wrap>
            <a-button @click="showSpin" :loading="loadingStates.button">按钮加载</a-button>
            <a-button @click="toggleSpin">切换加载</a-button>
            <a-button @click="showProgress">进度条</a-button>
            <a-button @click="showSkeleton">骨架屏</a-button>
          </a-space>

          <div class="loading-demos">
            <div class="loading-item">
              <h5>Spin 加载</h5>
              <a-spin :spinning="loadingStates.spin">
                <div class="spin-content">
                  <p>这是一段需要加载的内容。</p>
                  <p>当数据正在获取时，会显示加载状态。</p>
                </div>
              </a-spin>
            </div>

            <div class="loading-item">
              <h5>进度条</h5>
              <a-progress :percent="progressPercent" />
              <a-progress :percent="progressPercent" status="active" />
            </div>

            <div class="loading-item">
              <h5>骨架屏</h5>
              <a-skeleton :loading="loadingStates.skeleton" avatar>
                <div class="skeleton-content">
                  <a-avatar :size="40" />
                  <div class="content-text">
                    <h4>用户名称</h4>
                    <p>这是用户的详细信息内容，当数据加载完成后会显示真实内容。</p>
                  </div>
                </div>
              </a-skeleton>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">📋 组件代码示例</h3>
      <p class="section-description">通知组件的使用方法</p>

      <a-collapse>
        <a-collapse-panel key="1" header="消息提示">
          <pre class="code-block"><code>&lt;script setup&gt;
import { message } from 'ant-design-vue'

// 显示不同类型的消息
const showSuccess = () =&gt; {
  message.success('操作成功！')
}

const showError = () =&gt; {
  message.error('操作失败！')
}

const showWarning = () =&gt; {
  message.warning('请注意！')
}

const showInfo = () =&gt; {
  message.info('这是一条信息')
}

const showLoading = () =&gt; {
  const hide = message.loading('正在处理...', 0)
  setTimeout(hide, 2500)
}
&lt;/script&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="2" header="通知提醒">
          <pre class="code-block"><code>&lt;script setup&gt;
import { notification } from 'ant-design-vue'

const showNotification = () =&gt; {
  notification.success({
    message: '通知标题',
    description: '这是通知的详细内容描述。',
    duration: 4.5
  })
}

const showCustomNotification = () =&gt; {
  notification.open({
    message: '自定义通知',
    description: '这是一个自定义的通知内容。',
    icon: h(SmileOutlined, { style: 'color: #108ee9' })
  })
}
&lt;/script&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="3" header="AnyNotification 字段验证错误">
          <pre class="code-block"><code>// 后端返回的字段错误
const fieldErrors = {
  merchantId: "商户ID格式错误，应为8-32位大写字母和数字",
  contactTelephone: "请输入有效的手机号码"
}

// 显示字段验证错误
AnyNotification.validationError(fieldErrors, "商户信息验证失败")</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="4" header="AnyNotification HTTP请求拦截器">
          <pre class="code-block"><code>// 在axios响应拦截器中使用
import { AnyNotification } from '@/components/AnyNotification'

anyHttpClient.interceptors.response.use(
  (response) => response,
  (error) => {
    const { status, data } = error.response

    switch (status) {
      case 400:
        if (data?.data && typeof data.data === 'object') {
          AnyNotification.validationError(data.data, data.message)
        } else {
          AnyNotification.parameterError(data?.message)
        }
        break
      case 401:
        AnyNotification.authError()
        break
      case 403:
        AnyNotification.permissionError()
        break
      case 500:
        AnyNotification.serverError()
        break
    }

    return Promise.reject(error)
  }
)</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="5" header="AnyNotification 组件中使用">
          <pre class="code-block"><code>import { AnyNotification } from '@/components/AnyNotification'

// 在Vue组件中使用
const handleSubmit = async () => {
  try {
    await submitForm(formData)
    AnyNotification.success("表单提交成功！")
  } catch (error) {
    AnyNotification.generalError("提交失败，请重试")
  }
}</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="6" header="加载状态">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;!-- 按钮加载 --&gt;
  &lt;a-button :loading="loading" @click="handleClick"&gt;
    点击按钮
  &lt;/a-button&gt;

  &lt;!-- Spin 加载 --&gt;
  &lt;a-spin :spinning="spinning"&gt;
    &lt;div&gt;内容区域&lt;/div&gt;
  &lt;/a-spin&gt;

  &lt;!-- 进度条 --&gt;
  &lt;a-progress :percent="percent" /&gt;

  &lt;!-- 骨架屏 --&gt;
  &lt;a-skeleton :loading="loading" avatar&gt;
    &lt;div&gt;真实内容&lt;/div&gt;
  &lt;/a-skeleton&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import { message, notification } from 'ant-design-vue'
import { SmileOutlined } from '@ant-design/icons-vue'
import { AnyNotification } from '../../../components/AnyNotification'

// 加载状态
const loadingStates = reactive({
  button: false,
  spin: false,
  skeleton: true
})

// 进度
const progressPercent = ref(30)

// 显示消息
const showMessage = (type: string) => {
  switch (type) {
    case 'success':
      message.success('操作成功！')
      break
    case 'info':
      message.info('这是一条信息提示')
      break
    case 'warning':
      message.warning('请注意这个操作！')
      break
    case 'error':
      message.error('操作失败，请重试')
      break
    case 'loading':
      const hide = message.loading('正在处理中...', 0)
      setTimeout(hide, 2500)
      break
  }
}

// 显示通知
const showNotification = (type: string) => {
  const config = {
    success: {
      message: '操作成功',
      description: '您的操作已成功完成，系统已自动保存相关数据。'
    },
    info: {
      message: '系统信息',
      description: '这是一条系统信息通知，请注意查看相关内容。'
    },
    warning: {
      message: '警告提示',
      description: '检测到潜在风险，建议您仔细检查后再进行操作。'
    },
    error: {
      message: '操作失败',
      description: '操作执行失败，请检查网络连接或联系系统管理员。'
    }
  }

  const notificationConfig = config[type as keyof typeof config]
  if (notificationConfig) {
    notification[type as 'success' | 'info' | 'warning' | 'error'](notificationConfig)
  }
}

// 显示自定义通知
const showCustomNotification = () => {
  notification.open({
    message: '自定义通知',
    description: '这是一个带有自定义图标和样式的通知提醒。',
    icon: h(SmileOutlined, { style: 'color: #108ee9' }),
    duration: 4.5,
    placement: 'topRight'
  })
}

// 显示按钮加载
const showSpin = () => {
  loadingStates.button = true
  setTimeout(() => {
    loadingStates.button = false
    message.success('加载完成！')
  }, 2000)
}

// 切换加载状态
const toggleSpin = () => {
  loadingStates.spin = !loadingStates.spin
}

// 显示进度条
const showProgress = () => {
  progressPercent.value = 0
  const timer = setInterval(() => {
    progressPercent.value += 10
    if (progressPercent.value >= 100) {
      clearInterval(timer)
      message.success('进度完成！')
    }
  }, 200)
}

// 显示骨架屏
const showSkeleton = () => {
  loadingStates.skeleton = true
  setTimeout(() => {
    loadingStates.skeleton = false
  }, 3000)
}

// AnyNotification 演示方法
// 演示字段验证错误
const showValidationError = () => {
  const fieldErrors = {
    merchantId: "商户ID格式错误，应为8-32位大写字母和数字",
    contactTelephone: "请输入有效的手机号码",
    merchantName: "商户名称不能为空"
  }
  AnyNotification.validationError(fieldErrors, "商户信息验证失败")
}

// 演示参数错误
const showParameterError = () => {
  AnyNotification.parameterError("请求参数格式不正确，请检查后重试")
}

// 演示身份验证失败
const showAuthError = () => {
  AnyNotification.authError()
}

// 演示权限不足
const showPermissionError = () => {
  AnyNotification.permissionError()
}

// 演示资源未找到
const showNotFoundError = () => {
  AnyNotification.notFoundError()
}

// 演示服务器错误
const showServerError = () => {
  AnyNotification.serverError()
}

// 演示网络连接失败
const showNetworkError = () => {
  AnyNotification.networkError()
}

// 演示成功通知
const showSuccessNotification = () => {
  AnyNotification.success("操作执行成功！数据已保存到服务器", "保存成功")
}

// 演示信息通知
const showInfoNotification = () => {
  AnyNotification.info("系统将在10分钟后进行维护，请及时保存您的工作", "系统通知")
}

// 演示警告通知
const showWarningNotification = () => {
  AnyNotification.warning("检测到您的账户在异地登录，请注意账户安全", "安全提醒")
}
</script>

<style scoped>
.notification-demo {
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.example-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.section-description {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.demo-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-wrapper {
  padding: 24px;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.demo-wrapper:hover {
  border-color: #1890ff;
  background: #f0f8ff;
}

/* 特色功能网格 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.feature-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #1890ff;
}

.feature-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.feature-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.feature-card p {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

/* 加载演示样式 */
.loading-demos {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.loading-item {
  padding: 16px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.loading-item h5 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.spin-content {
  padding: 24px;
  text-align: center;
  background: #f9f9f9;
  border-radius: 4px;
}

.skeleton-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.content-text {
  flex: 1;
}

.content-text h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.content-text p {
  margin: 0;
  font-size: 13px;
  color: #8c8c8c;
  line-height: 1.5;
}

/* 代码示例 */
.code-block {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.45;
  overflow-x: auto;
  margin: 0;
}

.code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: #24292e;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .example-section {
    padding: 20px;
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 18px;
  }

  .demo-container {
    gap: 16px;
  }

  .demo-wrapper {
    padding: 20px;
  }

  .loading-demos {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .skeleton-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>